const p_product = {
    name: "p_product",
    template: `
        <div class="p_product">
            <div id="science">
                <div class="image">
                    <img src="../images/xueke.png">
                </div>
                <c_rich :rich="rich.xueke.a"></c_rich>
                <c_rich class="fuwu" rich="服务内容"></c_rich>
                <c_rich :rich="rich.xueke.b" capsule="true"></c_rich>
            </div>
            <div id="strategy">
                <img src="../images/yixuecelue.png">
                <div>
                    <c_rich class="title" rich="医学策略输出"></c_rich>
                    <c_rich :rich="rich.yixue.a"></c_rich>
                    <c_rich class="fuwu" rich="服务内容"></c_rich>
                    <c_rich :rich="rich.yixue.b" capsule="true"></c_rich>
                </div>
            </div>
            <div id="scheme">
                <div class="content">
                    <div>
                        <c_rich class="title" rich="品牌策略和市场推广"></c_rich>
                        <c_rich :rich="rich.pinpai.a"></c_rich>
                        <c_rich class="fuwu" rich="服务内容"></c_rich>
                        <c_rich :rich="rich.pinpai.b" capsule="true"></c_rich>
                    </div>
                    <img src="../images/pinpai.png">
                </div>
                <div class="lunbo">
                    <div class="schemeSwiper-prev" v-if="!isIOS" @click="schemeBannerSlide('Prev')"></div>
                    <div class="schemeSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in schemeList" :key="index" @click="showImage(index)">
                                <a href="javascript:void(0)">
                                    <img :src="item">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="schemeSwiper-next" v-if="!isIOS" @click="schemeBannerSlide('Next')"></div>
                </div>
            </div>
            <div id="platform">
                <img src="../images/xinxihua.png">
                <div>
                    <c_rich class="title" rich="信息化数据平台的规划及运营服务"></c_rich>
                    <c_rich :rich="rich.xinxi.a"></c_rich>
                    <c_rich class="fuwu" rich="服务内容"></c_rich>
                    <c_rich :rich="rich.xinxi.b" capsule="true"></c_rich>
                </div>
            </div>
            <div id="operation">
                <div class="content">
                    <div>
                        <c_rich class="title" rich="合规监管及项目运营"></c_rich>
                        <c_rich :rich="rich.hegui.a"></c_rich>
                        <c_rich class="fuwu" rich="服务内容"></c_rich>
                        <c_rich :rich="rich.hegui.b" capsule="true"></c_rich>
                    </div>
                    <img src="../images/heguijianguan.png">
                </div>
            </div>
            <c_gasbag id="news" text="新闻动态"></c_gasbag>
        </div>
    `,
    data() {
        return {
            swiper: null,
            schemeList: [],
            rich: {
                xueke: {
                    a: `<p style="line-height:3;"><b>COE学科中心体系建设的规划和实施服务</b><b></b></p><p>深度参与胸痛中心、心衰中心、高血压达标中心、动脉粥样硬化防控中心、泛血管疾病管理中心、脊柱关节炎一体化诊疗项目、国家脆性骨折规范管理中心、国家卵巢癌规范诊疗试点单位等多个疾病领域学科中心建设的规划和实施，致力于成为持续助力学科中心建设的践行者。</p><p style="line-height:3;">有高度、有标准、有流程、有策略的建设体系化疾病管理中心，助力公立医院高质量发展新趋势。</p><p>协助临床专科建设，推进医学技术创新，推进医疗服务模式创新，强化信息化支撑作用。</p>`,
                    b: `<p><b>体系规划、认证质控、培训宣教、组织实施、患教随访</b></p>`
                },
                yixue: {
                    a: `<p><b>立足临床、紧跟学术最新前沿，提供深度服务</b><br/></p>`,
                    b: `<p><b>COE标准、产品医学故事线、专家共识、学术幻灯、推广软文、医学手册</b></p>`
                },
                pinpai: {
                    a: `<p style="line-height:2;"><b>深度定制的全案品牌策略解决方案</b></p><p>依托行业资源，凭借高效的管理能力和创新能力，为企业深度定制全案品牌策略解决方案，带来更具创新的医疗服务模式。</p>`,
                    b: `<p><b>慢病随访管理、筛查评估策略、产品上市策划及品牌活动、健康科普传播、培训教育策划</b></p>`
                },
                xinxi: {
                    a: `<p style="line-height:2;">结合中心体系建设，打通疾病领域"急危重症救治体系"、"预防筛查体系"、"慢性疾病管理体系"三个管理体系，从而实现疾病的"防、救、治、管、康"的有机结合和全流程、全生命周期数据信息化管理。<br/></p>`,
                    b: `<p><b>认证质控、慢病随访、筛查评估、科普教育、会议管理</b></p>`
                },
                hegui: {
                    a: `<p>为客户提供专业的项目管理和高质量的会议执行服务，专设内审合规团队把控项目合规，丰富的线上、下活动执行经验。</p>`,
                    b: `<p><b>项目运营管理、合规执行监管、线上/下活动执行</b></p>`
                }
            }
        }
    },
    computed: {
        isIOS() {
            return ios;
        }
    },
    created() {
        sendRequest("recommend", {
            pid: 3
        }).then(res => {
            const { success, data } = res;
            if (success) {
                data.banner.map(item => {
                    this.schemeList.push(item.cover_img);
                })
            }
        })
    },
    mounted() {
        this.schemeBanner();
        const schemeSwiper = document.querySelector(".schemeSwiper");
        schemeSwiper.addEventListener("mouseenter", () => {
            this.swiper.autoplay.stop();
        });
        schemeSwiper.addEventListener("mouseleave", () => {
            this.swiper.autoplay.start();
        });
    },
    methods: {
        // 品牌策略轮播图
        schemeBanner() {
            const swiperOptions = {
                speed: 1000, // 速度
                autoplay: { // 自动播放
                    disableOnInteraction: false,
                    delay: 3000, // 持续时长
                },
                centeredSlides: true, // 网格布局
                slidesPerView: 4,// 网格数量
                slidesPerGroup: 2,
                centeredSlidesBounds: true,
                spaceBetween: mobile ? 10 : 30,
                observer: true,
                observeParents: true,
                freeMode: true
            };
            this.swiper = new Swiper(".schemeSwiper", swiperOptions);
        },
        // 品牌策略轮播图滑动
        schemeBannerSlide(funName) {
            this.swiper[`slide${funName}`]();
        },
        showImage(index) {
            bus.$emit("showImage", {
                index,
                list: this.schemeList
            })
        }
    }
}
Vue.component("p_product", p_product);